<template>
  <!-- 关联视频 -->
  <div class="videopage">
    <div
      class="bgbox"
      v-for="(item, i) in awemePop"
      :key="i + 'i'"
      @click="govideodetails(item.awemeid)"
    >
      <div class="img_tit">
        <img :src="item.thumpic" />
        <div class="tit">
          <div>{{ item.title }}</div>
          <div>
            <img :src="item.logo" />
            {{ item.nickname }}
          </div>
        </div>
      </div>
      <div class="datanum">
        <div>
          <span>{{ format_num(item.total_favorite) }}</span>点赞数
        </div>
        <div>
          <span>{{ format_num(item.total_comment) }}</span>评论数
        </div>
        <div>
          <span>{{ format_num(item.total_share) }}</span>转发数
        </div>
      </div>
    </div>
    <!-- 查看更多 -->
    <div class="more" v-if="!istips && count>10 && !isshowawemePop" @click="gomore">查看更多</div>
    <div class="bott" v-if="istips && awemePop.length">已经到底了哟，电脑登录dy.zsjx114.com查看更多详细数据~</div>
    <!-- 暂无数据 -->
    <div class="zanwu" v-if="isshowawemePop || !awemePop.length">
      <img src="@/assets/three/noData.png" />
      <p>暂无数据</p>
    </div>
  </div>
</template>
<script>
export default {
  components: {},
  data() {
    return {
      page: 1,
      awemePop: [], //列表
      count: '', // 列表总数
      istips: false,
      isshowawemePop: false
    };
  },
  watch: {},
  created() {
    this.searchSimilarAweme();
  },
  methods: {
    gomore() {
      this.page++;
      this.searchSimilarAweme();
    },
    searchSimilarAweme() {
      this.loading_01 = true;
      this.$axios
        .get(
          `/api/aweme/searchSimilarAweme?proid=${this.$route.query.id}&api-version=2&stime=${this.$route.query.startDate}&etime=${this.$route.query.endDate}&page=${this.page}&size=10`
        )
        .then(res => {
          this.loading_01 = false;
          if (res.data.code == 0) {
            this.awemePop.push(...res.data.data);
            this.count = res.data.count;
            if (this.count == this.awemePop.length) {
              this.istips = true;
            }
          }
          if (res.data.code == 1004) {
            this.isshowawemePop = true;
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    govideodetails(id) {
      this.$router.push({ path: '/videodetailsMain', query: { id: id } });
    }
  }
};
</script>
<style lang="less">
.videopage {
  width: 9.2rem;
  margin: 0 auto;
  .bgbox {
    padding-bottom: 0.4rem;
    border-bottom: 1px solid #e5e5e5;
    .img_tit {
      display: flex;
      padding: 0.4rem 0;
      img {
        display: block;
        width: 1.333333rem;
        height: 1.333rem;
        border-radius: 0.266667rem;
      }
      .tit {
        margin-left: 0.24rem;
        div:nth-of-type(1) {
          width: 7.546667rem;
          font-size: 0.4rem;
          color: #222;
          padding: 0.04rem 0 0.1rem 0;
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden;
        }
        div:nth-of-type(2) {
          img {
            display: inline-block;
            width: 0.533333rem;
            height: 0.533333rem;
            border-radius: 50%;
            margin-right: 0.133333rem;
          }
          width: 7rem;
          font-size: 0.346667rem;
          color: #666;
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden;
        }
      }
    }
    // 数据
    .datanum {
      display: flex;
      justify-content: space-around;
      div {
        span {
          display: block;
          font-size: 0.4rem;
          color: #222;
          font-family: DINPro-Medium;
        }
        text-align: center;
        font-size: 0.32rem;
        color: #888;
      }
    }
  }
  //   查看更多
  .more {
    width: 2.133333rem;
    margin: 0.6666rem auto;
    line-height: 0.8rem;
    border: solid 1px #ed8642;
    border-radius: 0.133333rem;
    font-size: 0.346667rem;
    letter-spacing: 1px;
    color: #ed8642;
    text-align: center;
  }
}
.bott {
  font-size: 0.2933rem;
  color: #b5b5b5;
  text-align: center;
  line-height: 1.0666rem;
}
//   暂无数据
.zanwu {
  width: 5.3333rem;
  height: 4rem;
  margin: 1rem auto 0 auto;
  img {
    margin: 0 auto;
    width: 4rem;
    height: 3.2rem;
    display: block;
  }
  p {
    font-size: 0.3467rem;
    line-height: 0.4rem;
    color: #888;
    text-align: center;
  }
}
</style>
